<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购</title>

    <script src="/js/vue/vue.js"></script>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/elementui/index.js"></script>
    <script src="/js/axios/axios.min.js"></script>
</head>
<body>
<!--app start-->
<div id="app">
    <!--内容区域 start-->
    <el-container>
        <!--左侧 start-->
        <el-aside width="200px" style="border: 1px solid #82848a;height: 900px;">
            <div class="left-top">供应商列表</div>
            <!--供应商列表 start-->
            <div>
                <div>
                    <el-radio v-model="companyId" label="">所有供应商</el-radio>
                </div>
                <div v-for="company in companys">
                    <el-radio v-model="companyId" :label="company.id">{{company.companyName}}</el-radio>
                </div>
            </div>
            <!--供应商列表 end-->
        </el-aside>
        <!--左侧 end-->

        <!--右侧 start-->
        <el-main style="border: 1px solid #82848a;height: 900px;">
            <!--多选购买按钮 start-->
            <el-button type="primary" @click="buyBoxVisible = true">多选购买</el-button>
            <!--多选购买按钮 end-->

            <!--搜索栏 start-->
            <el-input v-model="search" placeholder="请输入产品名称" @input="searchProduct"></el-input>
            <!--搜索栏 end-->

            <!--表格组件 start-->
            <el-table
                    :data="products"
                    border
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="产品编号"
                        prop="pnumber">
                </el-table-column>
                <el-table-column
                        label="产品名称"
                        prop="pname">
                </el-table-column>
                <el-table-column
                        label="商品图片"
                        prop="pimg">
                </el-table-column>
                <el-table-column
                        label="价格"
                        prop="pprice">
                </el-table-column>
                <el-table-column
                        lable="操作"
                        align="right">
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                @click="showBuyBox(scope.row)">购买
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--表格组件 end-->

            <!--分页组件 start-->
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="size"
                    :current-page="current"
                    :total="total"
                    @current-change="loadPage">
            </el-pagination>
            <!--分页组件 end-->
        </el-main>
        <!--右侧 end-->
    </el-container>
    <!--内容区域 end-->

    <!--购买商品对话框 start-->
    <el-dialog title="确认购买" :visible.sync="buyBoxVisible" width="80%">
        <el-table :data="orders">
            <el-table-column prop="orderId" label="订单编号"></el-table-column>
            <el-table-column prop="productId" label="产品编号"></el-table-column>
            <el-table-column prop="pname" label="产品名称"></el-table-column>
            <el-table-column prop="pprice" label="价格"></el-table-column>
            <el-table-column label="购买数量">
                <template scope="scope">
                    <el-input v-model="scope.row.number" :min="1" @input="changeTotalPrices(scope.row)">
                        <el-button slot="prepend" @click="changeQuantity(scope.row,-1)">
                            <i class="el-icon-minus"></i>
                        </el-button>

                        <el-button slot="append" @click="changeQuantity(scope.row,1)">
                            <i class="el-icon-plus"></i>
                        </el-button>
                    </el-input>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="总价"></el-table-column>
        </el-table>
        <el-row>
            <el-button type="primary" @click="createOrder">确认</el-button>
            <el-button @click="buyBoxVisible = false">取消</el-button>
        </el-row>
    </el-dialog>
    <!--购买商品对话框 end-->
</div>
<!--app end-->

<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                companys: null, // 供应商列表
                defaultProps: {
                    label: 'name'
                }, // 供应商列表树配置
                products: null, // 商品数据
                companyId: '', // 供应商id
                search: '', // 搜索关键词
                current: 1, // 当前页
                size: 5, // 每页行数
                total: 0, // 数据总数
                buyBoxVisible: false, // 控制购买商品对话框显隐
                orders: [], // 订单
            }
        },
        mounted() {
            // 加载供应商列表
            axios.get('/suppliers').then(value => {
                this.companys = value.data.data;
            });

            // 初始加载商品数据
            this.loadPage(1);
        },
        methods: {
            /**
             * 加载当前页
             * @param current 页数
             */
            loadPage(current) {
                var params = {current};

                if (this.companyId != '') {
                    params.companyId = this.companyId;
                }

                if (this.search != '') {
                    params.search = this.search;
                }

                axios.get('/supplierProducts', {params}).then(value => {
                    this.products = value.data.data.records;
                    this.current = value.data.data.current;
                    this.size = value.data.data.size;
                    this.total = value.data.data.total;
                });
            },

            /**
             * 输入值变化触发，搜索商品
             */
            searchProduct() {
                this.loadPage(1);
            },


            /**
             * 商品表格复选变化触发,获取选择商品数据
             * @param val 当前选择数据
             */
            handleSelectionChange(rows) {
                this.orders = [];
                if (rows.length > 0) {
                    for (const row of rows) {
                        var order = {}
                        // 订单编号
                        order.orderId = Math.floor(Math.random() * (9999999 - 1111111 + 1) + 1111111);
                        // 产品编号
                        order.productId = row.id;
                        // 产品名称
                        order.pname = row.pname;
                        // 数量
                        order.number = 1;
                        // 产品单价
                        order.pprice = row.pprice;
                        // 总价
                        order.money = row.pprice;
                        this.orders.push(order);
                    }
                }
            },

            /**
             * 显示购买商品对话框
             * @param row 当前行商品数据
             */
            showBuyBox(row) {
                this.orders = [];
                var order = {}
                // 订单编号
                order.orderId = Math.floor(Math.random() * (9999999 - 1111111 + 1) + 1111111);
                // 产品编号
                order.productId = row.id;
                // 产品名称
                order.pname = row.pname;
                // 数量
                order.number = 1;
                // 产品单价
                order.pprice = row.pprice;
                // 总价
                order.money = row.pprice;
                this.orders.push(order);
                this.buyBoxVisible = true;
            },


            /**
             * 商品数量加减
             * @param row 当前行订单数据
             * @param type 00
             */
            changeQuantity(row, type) {
                if (type > 0) {
                    row.number++;
                } else {
                    row.number > 1 ? row.number-- : row.number = 1;
                }

                this.changeTotalPrices(row);
            },

            /**
             * 计算总价
             * @param row
             */
            changeTotalPrices(row) {
                if (row.number <= 0 || row.number == '' || row.number == null) {
                    row.number = 1;
                }
                row.money = row.pprice * row.number;
            },

            /**
             * 生成订单
             */
            createOrder() {
                axios.post('/PurchaseOrders', this.orders).then(value => {
                    this.$message({
                        message: '添加采购订单成功',
                        type: 'success'
                    });
                    this.buyBoxVisible = false;
                });
            }
        },
        watch: {
            // 监听companyId
            companyId: function (newCompanyId, oldCompanyId) {
                this.loadPage(1);
            }
        }
    });
</script>
</body>
</html>